<template>
  <div class="bog-chat">
    <div class="blog-chat--content">
      <div class="blog-chat--item" :class="item.dis" v-for="item in chatList" :key="item.time">
        <span v-if="item.nikname" class="blog-chat--nikname">{{item.nikname}}</span>
        <div class="blog-chat--MsgBox" v-if="item.msg">
          <span class="blog-chat--time" v-if="item.time">{{item.time}}</span>
          <p class="blog-chat--message" v-if="item.msg">{{item.msg}}</p>
        </div>
      </div>
    </div>
    <div class="blog-chat--bottom">
      <el-input v-model="sendMsg" @keydown.native.enter="sendChat"></el-input>
      <el-button type="primary" @click="sendChat">发送</el-button>
    </div>
    <el-dialog
  title="欢迎来到聊天室"
  :visible="dialogVisible"
  width="30%"
  :before-close="handleClose">
  <el-input placeholder="请输入昵称" v-model="nikname">  
  </el-input>
  <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="enterchat">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
const { io } = require("socket.io-client");
import formatDate from '@/core/utils.js'
export default {
  components:{},
  data(){
    return {
      sendMsg: '',
      resMsg: '',
      chatList: [],
      nikname: '',
      uid: '',
      dialogVisible: true
    }
  },
created(){
  this.$store.commit('RIGHT_LIVE2D_SET')
  if(this.$ws)
  {
    this.ws = this.$ws
    this.getUserInfo()
    this.ws.emit('enterchat', {uid: this.uid, nikname: this.nikname})
    this.dialogVisible = false
  }
  else{
    this.ws = io(process.env.VUE_APP_USER_CHAT_PATH, {transports: ['websocket']})
  }
  this.ws.on('connect', ()=> {
    console.log('建立连接')
  })
  //聊天
  this.ws.on('chat', (data) => { 
    this.resMsg = data.msg
    this.nikname = data.nikname
    let time = data.time
    this.serverChat({
      msg: this.resMsg,
      nikname: this.nikname,
      time
    })
  })
  //登出
  this.ws.on('logout', (nikname) => {
    this.serverLog({nikname, isLogin: false})
  })
  //登录
  this.ws.on('logged', (nikname) => {
    this.serverLog({nikname, isLogin: true})
  })

},
beforeDestroy() {
  this.$store.commit('LEFT_LIVE2D_SET');
  this.ws.emit('leaveChat')
},

mounted(){
},
watch:{},
computed:{
},
methods:{
  getUserInfo() {
    let {nikname, _id} = this.$store.getters.userInfo
    this.nikname = nikname;
    this.uid = _id; 
  },
  handleClose(done) {
    this.$router.push('/index');
    
  },
  serverLog({nikname, isLogin}){
    let state = isLogin ? '进入' : '离开'
    let msg = `${nikname} ${state}了聊天室`
    this.addChat({
      type: 'action',
      msg
    })
  },
  serverChat({msg = '', nikname='xxx', time=formatDate()})
  {
    this.addChat({
      msg,
      nikname,
      time
    })    
  },
  enterchat() {
    this.ws.emit('enterchat', {nikname: this.nikname})
    this.dialogVisible = false
  },
  addChat({type='msg',msg="", nikname='', time=formatDate(), isMe=false, dis='left'}) {
    if (type === 'action')
    {
      dis = 'center'
    }
    if (isMe === true)
    {
      dis = 'right'
    }
    this.chatList.push({
      type,
      msg,
      nikname,
      time,
      isMe,
      dis
    })
  },
  //发送消息
  sendChat () {
    let msg = this.sendMsg;
    this.addChat({
      nikname: this.nikname,
      isMe: true,
      msg,
    })
    this.ws.emit('send', msg)
    this.sendMsg = ''
  }
},
}
</script>
<style lang="scss" scoped>
  .center {
    align-self: center;
  }
  .right {
    align-self: flex-end;
  }
  .left {
    align-self: flex-start;
  }

  .blog-chat--content {
    display: flex;
    text-align: center;
    flex-direction: column;
    padding: 10px;
    height: 500px;
    background-color: rgba(0, 0, 0, .4);
    border-radius: 4px;
    .blog-chat--item {
      width: 200px;
      background-color: #f5f5f5;
      border-radius: 8px;
      margin-bottom: 20px;
    }
  }
  .blog-chat--bottom {
    display: flex;
  }


</style>